require(['./config'], () => {
    require(['template','header', 'footer' ], (template) => {
      class Shopping {
        constructor () {  
          this.renderList()
          this.checkesChange()
          this.setCheckAllstate()
          this.changeAllcheck()
          this.calcTotalPrice()
          this.detaildown()
          this.topbutton()
          
        }
        // detail
        detaildown(){
          $(() => {
              $('li:has(.detail)').hover(function () {
                // 如果100ms内再次进入，把定时器清除，就不隐藏了
                clearTimeout(this.timer)
                $(this).children('.detail').stop().slideDown(500)
              }, function () {
                // 离开的时候可能会再短时间内再次进入，所以用一个延时器
                this.timer = setTimeout(() => {
                  $(this).children('.detail').stop().slideUp(500)
                }, 100)
              })
            })
      }
      // 回到顶部
      topbutton(){
        $(window).scroll(function(){
          if ($(window).scrollTop()>100){ 
            $("#topBtn").fadeIn(700); 
        }
        else                           
        {
            $("#topBtn").fadeOut(700); 
        }
          $('#topBtn').on('click', function() {
            $('body,html').animate({ 
              scrollTop:0 
          },700);
          return false; 
        })
        })
      }
        // 根据localStorage的购物车数据渲染列表
        renderList () {
          let cart = localStorage.getItem('cart')
          if (cart) {
            this.cart = JSON.parse(cart)
           $('#cart-tbody').html(template('cart-tbody-template', { cart: this.cart }))
          } else {
            $('#cart-empty').show()
          }
          this.setAllnumber()
          this.setAddnumber()
          this.setAllDelete()
        }
        
      // 单纯判断全选时check状态
      /* 
      1、需要先把cart数组判断，every作为一个标志位
      2、当为true时，全选按钮应该prop('checked',true)
      3、当为false时，全选按钮应该prop('ckecked',false)
      4、由于一开始都是判断没有绑事件。最后筛选cart，给全选按钮绑事件，prop('checked',every(shop=>{
        return shop.check
      }))
      
      */
      setCheckAllstate() {
        //当每一个都满足的时候才true，可以判断全选，或者全不选
        //第一个是作为判断
       
        const isAllcheck = this.cart.every(shop => {
          return shop.check
        })
        
        // 判断当全选中时。选中的时候是true，不选中的时候是false
        if (isAllcheck) {
          $('#all-check').prop('checked', true)
          // 有一个不满足的时候就是folse
        } else {
          $('#all-check').prop('checked', false)
        }
        // 如果cart所有数据都是check为true，那么全选checked属性也为true     ????
        //第二条数据作为筛选
        $('#allCheck').prop('checked', this.cart.every(shop => {
          return shop.check
        }))

      }
        // 判断单选状态
              // 判断单选
                /* 
                1、给单选按钮绑定change事件
                2、获取到动态id运用attr方法
                3、通过id来确定数据，遍历cart数据，当他的数据与id相同，便能确定是一条数据，给他添加新数组中选中prop('ckecked')返回return shop
                4、再讲修改后的数据覆盖到localStorage里面
                5、重新调用全选按钮，计算总价
                */
        checkesChange() {
          const _this = this
          $('.check').on('change', function () {
            // 找到当前商品的id，根据id修改选中状态
            const id = $(this).parents('tr').attr('data-id')
            _this.cart = _this.cart.map(shop => {
              // 用prop取当前选框的checked属性，赋值给当前数据
              if (shop.id == id) shop.check = $(this).prop('checked')
              return shop
            })
            // 把修改之后的cart再存进去
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            // 每一次单选改变的时候都要取设置全选状态
            _this.setCheckAllstate()
            // 在数据修改完成以后重新计算总价
            _this.calcTotalPrice()
          })
        }
        //  判断全选按钮的点击事件
          /* 
          1、先获取数据
          2、转化为JavaScript数据
          3、每一项都满足返回true。checked等于true/或者调全选状态方法
          4、对全选按钮change事件。
          5、遍历新数组来实现改变check的状态。当全选中的时候就是所有的单选都选中，当全没选中就是所有的单选都不选中
          6、再将数据存入数据中
          7、调总价
          */
        changeAllcheck() {
          let _this = this
          // 获取数据
          let cart = localStorage.getItem('cart')
          // 转化
          cart = JSON.parse(cart)
          // 每一项都满足返回true
          $('#all-check').prop('checked', cart.every(shop => {
            return shop.check === true
          }))
          //  对全选按钮改变事件
          $('#all-check').on('change', function () {
            // 遍历处理成新数组
            cart = cart.map((shop, index) => {
              shop.check = $(this).prop('checked')
              //  每一个能匹配的value值
              $('.check').eq(index).prop('checked', shop.check)
              return shop
            })
            // 将数据传到localStorage上面
            localStorage.setItem('cart', JSON.stringify(cart));
            // 在数据修改完成以后重新计算总价
            
            _this.calcTotalPrice()
          })

         
        }
        // 总价
        calcTotalPrice () {
      
          // 同步到数据this.cart里，所以我们只需要从this.cart里来计算总价
          // 在做了影响总价的操作的时候只需要调用一下方法
          
          let cart = localStorage.getItem('cart')
          // 转化
          cart = JSON.parse(cart)


          const totalPrice = cart.reduce((money, shop) => {
            if (shop.check) money += shop.price * shop.count
            return money
          }, 0)
          $('#Paymoney').html(totalPrice.toFixed(2))
        }
        // 减法
        setAllnumber(){
          const _this = this
          $('.sub').on('click', function(){
            const id = $(this).parents('tr').attr('data-id')
            _this.cart = _this.cart.map(shop => {
              if (shop.id == id){
                if(shop.count == 1){
                }else{
                  shop.count--
                }
              }
              return shop
            })
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            _this.calcTotalPrice ()
            // 从新渲染页面
            _this.renderList ()
            // 从新计价
            _this.calcTotalPrice ()
          })
        }
        // 加法
        setAddnumber(){
          const _this = this
          $('.plus').on('click', function(){
            const id = $(this).parents('tr').attr('data-id')
            _this.cart = _this.cart.map(shop => {
              if (shop.id == id){
                if(shop.count >= 10){
                  alert('限购10件')
                }else{
                  shop.count++
                }
              }
              return shop
            })
            // 将数据传到localStorage上面
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            _this.calcTotalPrice ()
            // 从新渲染页面
            _this.renderList ()
            // 从新计价
            _this.calcTotalPrice ()
          })
        }
        // 删除商品
        setAllDelete() {
          const _this = this
          $('.del').on('click', function () {
            console.log(111)
            const id = $(this).parents('tr').attr('data-id')
            // 过滤掉id返回新的数组
            _this.cart = _this.cart.filter(shop => {
              return shop.id != id
            })
            // 上传数据
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            //  渲染
            _this.calcTotalPrice () 
            // 从新渲染页面
            _this.renderList()
            // 从新计价    
            _this.calcTotalPrice () 
          })
        }
      }
      new Shopping()
    })
  })